<template>
  <div class="container">
    <div class="min-containerone">
      <img
        style="width: 100%; height: 250px"
        src="../assets/f26289bacce157c93f23c65a85a2fd6.png"
        alt=""
      />
    </div>
    <div class="min-containertwo">
      <div class="profile">
        <div class="profile-header">
          <img
            style="
              width: 100px;
              height: 100px;
              border-radius: 50px;
              transform: translateY(-20px);
            "
            :src="user.headUrl"
            size="large"
          />
        </div>
        <div class="profile-body">
          <Layout>
            <div style="font-size: 18px; font-weight: bold">
              {{ user.nickname }}
            </div>
            <div style="font-size: 14px">
              这个人很懒，什么都没有留下来<i
                @click="showmessage = !showmessage"
                style="
                  font-size: 10px;
                  color: blue;
                  margin-left: 10px;
                  transform: translateY(-20px);
                "
                >查看详情</i
              >
            </div>
            <Button  @click="openCode()" type="success">聊一聊</Button>
              <Drawer title="聊一聊" :closable="false" v-model="value" width="500">
                 <div style="width: 100%;height: 100%">
                  <div style="width: 100%;height: 80% ;overflow: auto;">
                    <div v-for="( chart ,index) in item" :key="index" style="display: flex;position: relative;overflow: auto;">
                      <Img style="height: 60px;height: 60px;margin: 10px;" :src=chart.headUrl></Img>
                      <div style="width:60%; font-size: 20px;margin-top: 30px;">{{chart.chart}}</div>
                    </div>
                    </div>
                 <div style="width: 100%;height: 20%;background: #ffffff;position: relative;">
                  <div style="margin-top: 10px;">
                    <Input v-model="sentMessage" type="textarea" :rows="5" placeholder="Enter something..." />  
                    <Button style="width: 100%;" type="success" @click="sentMessages()">发送</Button>
                </div>
                </div>
                </div>
             </Drawer>
            <Content>
              <div v-show="showmessage" style="display: flex">
                <div>{{ user.sex }}</div>
                <div style="margin-left: 10px">{{ user.phoneNum }}</div>
              </div>
            </Content>
          </Layout>
        </div>
      </div>
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="我发布的" name="first"
        >
        <div style="width: 100%;height: 100%;display: flex;">
        <me-updata></me-updata>
        </div>
        </el-tab-pane
      >
      <el-tab-pane label="详细信息" name="second">
        <div style="width: 100%;height: 100%;display: flex;">
        <updata-message></updata-message>
       </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import axios from 'axios';
import MeUpdata from './mineson/meUpdata.vue';
import updataMessage from './mineson/updataMessage.vue';
export default {
  components: { updataMessage, MeUpdata },
  
  data() {
    return {
      value:false,
      sentMessage:'',
      showmessage: false,
      user: {},
      item:[],
      activeName: "second",
    };
  },
  mounted() {
    const savedUser = localStorage.getItem("user");
    console.log(localStorage.getItem("user"));
    if (savedUser) {
      this.user = JSON.parse(savedUser);
      console.log(111111111111111, this.user);
    }
  },
  methods:{
    openCode(){
      this.value = true;
      this.getmessage()
    },
    //发送消息
    sentMessages(){
        console.log(this.sentMessage);
        console.log(this.user.studentId);
        axios.post('http://localhost:8081/salvage/charts/sendChart',{
           studentId:this.user.studentId,
           chart:this.sentMessage
        })
        this.sentMessage = '',
        this.getmessage()
      },
      //查看所有信息
      getmessage(){
        axios.post('http://localhost:8081/salvage/charts/getCharts',{studentId:''})
        .then((res)=>{
          console.log(res.data.data);
          this.item = res.data.data
        })
      }
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}
.min-containertwo {
  margin-left: 40px;
  border-bottom: 1px solid rgb(231, 231, 231);
  border-left: none;
  border-right: none;
  border-top: none;
}
.min-containerone {
  border-bottom: 1px solid rgb(231, 231, 231);
  border-left: none;
  border-right: none;
  border-top: none;
}
.profile {
  display: flex;
  align-items: center;
  /* padding: 20px; */
}

.profile-header {
  margin-right: 20px;
}
</style>